import CommonUtils from "../../common/utils/CommonUtils";
import productimg from "../../../../imgs/product-1.jpg";
import ImageWithError from "@page/common/comps/ImageWithError";
import ProtocolTag from "@page/common/comps/ProtocolTag";
import urlHook from "@page/common/utils/urlHook";
import icon_promise from "../../../../imgs/icon_promise.png";
import DangeTag from "@page/common/comps/DangeTag";
import PopOver from '@ui/RJMart/popover'
import Uts from "@module/Uts";
import showLoginModal from "@root/P/pages/LoginModal/showLoginModal"


export default class GoodsBigItem extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false,
            img_error: false
        };
    }

    componentDidMount() {
        let imgLists = document.querySelectorAll(".search-page-lists-tab3-img");

        if (imgLists) {
            for (let i = 0; i < imgLists.length; i++) {
                let ele = imgLists[i];
                ele.onclick = function(e) {
                    e.stopPropagation();
                    window.open(urlHook.helpForTurePrice);
                };
            }
        }
    }

    getCutLen(protocol,suppflag){
       if(protocol=='1'&&suppflag==1){
           return 9;
       }
       if(protocol=='1'&&suppflag!=1){
           return  11;
       }
        if(protocol!='1'&&suppflag==1){
            return  15;
        }
        return  15;
    }


    isSuppSelf(suppId){
        const isSuppSelf=Uts.getCookie('suppId')==suppId;
        return isSuppSelf;
    }

    render() {
        const { index, item } = this.props;
        const { selected, img_error } = this.state;
        let {
            photo,
            name,
            price,
            saleAmount,
            suppname,
            sn,
            suppId,
            suppflag,
            negotiatedPrice,
            activityPrice,
            groupBuying,
            protocol
        } = item;

        let cutLen=this.getCutLen(protocol,suppflag)
        return (
            <div
                onClick={() => {
                    window.open(`#detail?productId=${sn}&suppId=${suppId}`);
                }}
                onMouseOver={() => {
                    this.setState({
                        selected: true
                    });
                }}
                onMouseOut={() => {
                    this.setState({
                        selected: false
                    });
                }}
                className={
                    selected
                        ? "search-page-big-pics-box1"
                        : "search-page-big-pics-box"
                }
                style={{ marginRight: (index + 1) % 5 == 0 ? 0 : 20 }}
            >
                <ImageWithError src={photo} />

                <div className={"search-page-big-pics-item"}>
                    <div className={"search-page-big-pics-top"}>
                        {!global.hasLogin&&!this.isSuppSelf(suppId) ?
                            (
                                <p
                                    onClick={(e)=>{
                                        e.stopPropagation()
                                        showLoginModal(false,true)
                                    }}
                                    className={
                                        "search-page-big-pics-price1 zen_bold"
                                    }
                                >
                                    {global.isSupp? "单位登录可见":"价格登录可见"}
                                </p>
                            )
                             :
                            (
                            <p
                                className={
                                    "search-page-big-pics-price zen_bold"
                                }
                            >
                                ¥{price.toFixed(2)}
                                {this.renderPriceTag(
                                    negotiatedPrice,
                                    activityPrice,
                                    groupBuying
                                )}
                            </p>
                        ) }
                        {global.hasLogin && (
                            <p className={"search-page-big-pics-num"}>
                                销量:{saleAmount}
                            </p>
                        )}
                    </div>
                    <div className={"search-page-big-pics-name-wrapper"}>
                        <p
                            dangerouslySetInnerHTML={{ __html: name }}
                            className={"search-page-big-pics-name"}
                        />
                    </div>
                    <div className="zen_p-l-12 zen_fs-14 zen_FFFFFF zen_ps-ab zen_b-50">
                        {item.dangerousTag &&
                        item.dangerousTag != "其他" &&
                        item.dangerousTag != "常规化学品" && (
                            <DangeTag dangerousTag={item.dangerousTag} />
                        )}
                    </div>
                    <div className={"search-page-big-pics-comp-wrapper"}>
                        <div className="zen_clf">
                            <p
                                onClick={e => {
                                    e.stopPropagation();
                                    window.open(
                                        `#supplierShop?suppId=${suppId}`
                                    );
                                }}
                                dangerouslySetInnerHTML={{
                                    __html: Filter.cutString(
                                        this.strReplace(suppname),
                                        cutLen,
                                        1
                                    )
                                }}
                                className={
                                    "search-page-big-pics-comp zen_969696 zen_f-left"
                                }
                            />
                            {suppflag == 1 && (
                                <img
                                    onClick={e => {
                                        e.stopPropagation();
                                        window.open(urlHook.helpForTurePrice);
                                    }}
                                    src={icon_promise}
                                    style={{
                                        width: 30,
                                        height: 30,
                                        marginTop: -6,
                                        marginLeft: 2,
                                        float:'left'
                                    }}
                                />
                            )}

                            {protocol=='1' && (
                                <ProtocolTag className={'zen_fs-12 zen_f-left zen_bg-58d1bd zen_FFFFFF zen_p-v-2 zen_p-h-5 zen_bdr-3 zen_m-l-3'}/>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

// <span className="zen_fs-12 zen_f-left zen_bg-58d1bd zen_FFFFFF zen_p-v-2 zen_p-h-5 zen_bdr-3 zen_m-l-3">
// 协议价
// </span>

    renderPriceTag(negotiatedPrice, activityPrice, groupBuying) {
        if (negotiatedPrice) {
            return (
                <div
                    className="zen_f-right zen_fs-12 zen_p-h-4 zen_p-v-2 zen_m-l-5 zen_bg-FF6D0B zen_FFFFFF zen_bdr-4"
                    style={{
                        width: 60,
                        height: 18,
                        minWidth: 60,
                        lineHeight: "20px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    <p>协议价</p>
                </div>

            );
        } else if (activityPrice) {
            return (
                <p
                    className="zen_f-right zen_fs-12 zen_p-h-4 zen_p-v-2 zen_m-l-5 zen_bg-FF6D0B zen_FFFFFF zen_bdr-4"
                    style={{
                        width: 60,
                        height: 18,
                        minWidth: 60,
                        lineHeight: "20px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    限时折扣
                </p>
            );
        } else if (groupBuying) {
            return (
                <p
                    className="zen_f-right zen_fs-12 zen_p-h-4 zen_p-v-2 zen_m-l-5 zen_bg-FF6D0B zen_FFFFFF zen_bdr-4"
                    style={{
                        width: 40,
                        height: 18,
                        minWidth: 40,
                        lineHeight: "20px",
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center"
                    }}
                >
                    团购
                </p>
            );
        }
        return null;
    }

    strReplace(str) {
        return str.replace("&#40;", "(");
    }
}
